<template>
    <div class="public-head">
        <div class="left" v-if="showBack" @click="goBack">
            <slot name="left">
                <u-icon :name="backIcon" color="#fff" :size="18"></u-icon>
                <div class="back-title" v-if="backTitle">{{ backTitle }}</div>
            </slot>
        </div>
        <div class="center" :style="{ '--align': align }">
            <slot name="center">{{ title }}</slot>
        </div>
        <div class="right">
            <slot name="right"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'public-head',
    props: {
        // 标题
        title: {
            type: String,
            default: '',
        },
        backTitle: {
            type: String,
            default: '',
        },
        backIcon: {
            type: String,
            default: 'arrow-left',
        },
        // 标题对齐方式 left/right/center
        align: {
            type: String,
            default: 'center',
        },
        // 是否显示返回图标
        showBack: {
            type: Boolean,
            default: false,
        },
        // 自定义返回回调
        backFun: {
            type: Function,
            default: null,
        },
    },
    data() {
        return {
        };
    },
    methods: {
        goBack() {
            if (this.backFun) {
                this.backFun();
                return;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.public-head {
    padding-top: 30px;
    padding-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 14px;
    box-sizing: content-box;
    // background: #02BFA6;
    color: #fff;
    position: sticky;
    --safe-top: env(safe-area-inset-top);
    top: var(--safe-top, 0);

    .left {
        position: absolute;
        left: 12px;
        margin-right: 8px;
        display: flex;
        align-items: center;
        gap: 4px;

        .back-title {
            font-size: 16px;
            line-height: 16px;
        }
    }

    .center {
        flex: 1;
        text-align: var(--align);
        font-size: 16px;
        line-height: 16px;
    }
}
</style>
